import React, {useEffect} from 'react';
import {View, Text, TouchableOpacity, TextInput} from 'react-native';
import {InputItem} from '@ant-design/react-native';
import {useNavigation} from '@react-navigation/native';
import AreaView from '../../components/Layout/AreaView';
import {RadioGroup, RadioButton} from 'react-native-flexi-radio-button';
import styles from './style';

const Invoice = () => {
  const navigation = useNavigation();
  const inputList = [
    {label: '发票抬头', placeholder: '请输入发票抬头（必填）'},
    {label: '发票内容', placeholder: '请输入发票内容（必填）'},
    {label: '单位税号', placeholder: '请输入单位税号（必填）'},
    {label: '注册地址', placeholder: '请输入注册地址（必填）'},
    {label: '注册电话', placeholder: '请输入注册电话（必填）'},
    {label: '开户银行', placeholder: '请输入开户银行（必填）'},
    {label: '银行账号', placeholder: '请输入银行账号（必填）'},
  ];

  return (
    <AreaView>
      <View style={[styles.radio_list, styles.top]}>
        <View style={styles.label}>
          <Text style={styles.text}>发票类型</Text>
        </View>
        <View style={styles.radio_box}>
          <RadioGroup
            size={14}
            color="#999"
            activeColor="#EB0029"
            style={styles.radio_container}
            onSelect={(index, value) => console.log(index, value)}>
            <RadioButton value={'1'}>
              <Text style={styles.text}>普通发票</Text>
            </RadioButton>
            <RadioButton value={'2'}>
              <Text style={styles.text}>增值税专用发票</Text>
            </RadioButton>
          </RadioGroup>
        </View>
      </View>
      <View style={[styles.radio_list]}>
        <View style={styles.label}>
          <Text style={styles.text}>抬头类型</Text>
        </View>
        <View style={styles.radio_box}>
          <RadioGroup
            size={14}
            color="#999"
            activeColor="#EB0029"
            style={styles.radio_container}
            onSelect={(index, value) => console.log(index, value)}>
            <RadioButton value={'1'}>
              <Text style={styles.text}>个人</Text>
            </RadioButton>
            <RadioButton value={'2'}>
              <Text style={styles.text}>企事业单位</Text>
            </RadioButton>
          </RadioGroup>
        </View>
      </View>
      {(inputList || []).map((item) => (
        <InputItem
          style={styles.input_item}
          clear
          last
          labelNumber={4}
          placeholder={item.placeholder}>
          <Text style={styles.text}>{item.label}</Text>
        </InputItem>
      ))}
      <View style={styles.btn_container}>
        <TouchableOpacity  activeOpacity={1} style={styles.btn}>
          <Text style={styles.btn_text}>确认</Text>
        </TouchableOpacity>
      </View>
    </AreaView>
  );
};

export default Invoice;
